Third-party Native Libraries Integration

React Native আপনাকে native libraries (যেমন Java, Swift, Objective-C, অথবা C++ এ লেখা) আপনার অ্যাপ্লিকেশনে অন্তর্ভুক্ত করার সুবিধা দেয়, যা আপনাকে প্ল্যাটফর্ম-নির্দিষ্ট ফিচার বা ক্ষমতা ব্যবহার করতে সাহায্য করে যা JavaScript বা React Native এর কোর মডিউলে পাওয়া যায় না। এই ধরনের third-party native libraries আপনার অ্যাপের কার্যকারিতা বাড়াতে সক্ষম, যেমন push notifications, camera, GPS, payment, এবং আরও অনেক কিছু।

এখানে আমরা React Native অ্যাপে third-party native libraries ইন্টিগ্রেট করার ধাপগুলো নিয়ে আলোচনা করব।

Third-party Native Libraries ইন্টিগ্রেশন করার ধাপসমূহ

ধাপ ১: npm বা yarn দিয়ে লাইব্রেরি ইনস্টল করা

প্রথমে আপনাকে আপনার React Native প্রোজেক্টে third-party native লাইব্রেরি ইনস্টল করতে হবে, যেটি সাধারণত npm বা yarn এর মাধ্যমে করা হয়। বেশিরভাগ third-party native libraries npm প্যাকেজ প্রদান করে যা React Native এবং native কোডের মধ্যে একটি JavaScript ব্রিজ হিসেবে কাজ করে।

যেমন ধরুন, আপনি react-native-camera (ক্যামেরা ব্যবহারের জন্য একটি জনপ্রিয় লাইব্রেরি) ইন্টিগ্রেট করতে চান:

npm install react-native-camera --save

অথবা

yarn add react-native-camera

ধাপ ২: লাইব্রেরি লিঙ্ক করা

React Native 0.60 সংস্করণের আগে আপনাকে react-native link কমান্ড ব্যবহার করে ম্যানুয়ালি native মডিউলগুলো লিঙ্ক করতে হতো। তবে React Native 0.60 থেকে auto-linking ফিচার চালু করা হয়েছে, যা লাইব্রেরি ইনস্টল করার সাথে সাথে অটোমেটিকভাবে লিঙ্ক করে দেয়।

যদি আপনার প্রোজেক্ট পুরোনো সংস্করণের হয়, তাহলে ম্যানুয়ালি লিঙ্ক করার জন্য নিচের কমান্ডটি ব্যবহার করুন:

react-native link react-native-camera

তবে React Native 0.60 বা তার পরবর্তী সংস্করণে লাইব্রেরি অটোমেটিকালি লিঙ্ক হয়ে যাবে।

ধাপ ৩: iOS এবং Android এর জন্য অতিরিক্ত কনফিগারেশন

কিছু libraries এর জন্য iOS বা Android-এ অতিরিক্ত কনফিগারেশন প্রয়োজন হতে পারে, বিশেষ করে যদি সেগুলি প্ল্যাটফর্ম-নির্দিষ্ট permissions বা অন্যান্য ডিপেন্ডেন্সির উপর নির্ভর করে।

• iOS: আপনি Xcode এ প্রোজেক্টটি ওপেন করে কিছু সেটিংস কনফিগার করতে পারেন।
  • Info.plist ফাইলের মধ্যে ক্যামেরা, লোকেশন, মাইক্রোফোন ইত্যাদি ব্যবহারের জন্য প্রয়োজনীয় অনুমতির সন্নিবেশ করা।

যেমন, ক্যামেরার জন্য Info.plist এ এই লাইনটি যোগ করুন:

<key>NSCameraUsageDescription</key>
<string>We need access to the camera for scanning barcodes.</string>

• Android: Android এ আপনাকে AndroidManifest.xml ফাইলেও কিছু পরিবর্তন করতে হতে পারে।
  • ক্যামেরা, লোকেশন ইত্যাদির জন্য প্রপার অনুমতিগুলো যোগ করতে হবে।

যেমন:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />

ধাপ ৪: অ্যাপ পুনরায় বিল্ড করা

লাইব্রেরি লিঙ্ক এবং কনফিগারেশন করার পর আপনাকে অ্যাপটি পুনরায় বিল্ড করতে হবে।

iOS এর জন্য:

cd ios && pod install && cd ..
react-native run-ios

Android এর জন্য:

react-native run-android

ধাপ ৫: লাইব্রেরি ব্যবহার করা

এখন লাইব্রেরিটি ইনস্টল এবং কনফিগার করা হয়ে গেলে, আপনি সেই লাইব্রেরিটি আপনার React Native জাভাস্ক্রিপ্ট কোডে ব্যবহার করতে পারবেন। ধরুন, আপনি react-native-camera ব্যবহার করতে চান:

import React from 'react';
import { View, Text } from 'react-native';
import { RNCamera } from 'react-native-camera';

const CameraScreen = () => {
  let camera;

  const takePicture = async () => {
    if (camera) {
      const data = await camera.takePictureAsync();
      console.log(data.uri); // ছবি URI
    }
  };

  return (
    <View style={{ flex: 1 }}>
      <RNCamera
        ref={(ref) => { camera = ref; }}
        style={{ flex: 1 }}
        type={RNCamera.Constants.Type.back}
        captureAudio={false}
      >
        <View>
          <Text onPress={takePicture}>Capture</Text>
        </View>
      </RNCamera>
    </View>
  );
};

export default CameraScreen;

ধাপ ৬: পারমিশন ম্যানেজমেন্ট

বেশিরভাগ third-party native libraries-এর জন্য ডিভাইসের হার্ডওয়্যার বা সেনসিটিভ ডেটার সাথে কাজ করার জন্য পারমিশন প্রয়োজন হয়। React Native ডিফল্টভাবে এই পারমিশনগুলি চায় না, তাই আপনাকে ম্যানুয়ালি পারমিশনগুলো নিয়ন্ত্রণ করতে হবে।

react-native-permissions লাইব্রেরি ব্যবহার করে আপনি পারমিশন ম্যানেজ করতে পারেন।

1. ইনস্টল করুন:

npm install react-native-permissions

2. কোডে পারমিশন রিকোয়েস্ট করা:

যেমন ক্যামেরা পারমিশন রিকোয়েস্ট করা:

import { PermissionsAndroid } from 'react-native';

async function requestCameraPermission() {
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.CAMERA,
      {
        title: 'Camera Permission',
        message: 'This app needs access to your camera.',
        buttonNeutral: 'Ask Me Later',
        buttonNegative: 'Cancel',
        buttonPositive: 'OK',
      },
    );
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      console.log('Camera permission granted');
    } else {
      console.log('Camera permission denied');
    }
  } catch (err) {
    console.warn(err);
  }
}

ধাপ ৭: Native মডিউল ডিবাগিং

Native লাইব্রেরি ইন্টিগ্রেট করার সময় আপনাকে JavaScript এবং Native কোড উভয়ের সাথে কাজ করতে হবে। যদি লাইব্রেরির সাথে ডিবাগিং করার প্রয়োজন হয়, তবে আপনাকে logcat বা Xcode debugger ব্যবহার করতে হতে পারে।

Android এর জন্য:

adb logcat *:E

iOS এর জন্য:

Xcode এর built-in debugger ব্যবহার করুন।

কিছু জনপ্রিয় Third-party Native Libraries

• react-native-camera: ক্যামেরা ব্যবহারের জন্য।
• react-native-maps: ম্যাপ এবং জিওলোকেশন ফিচার ইন্টিগ্রেট করতে।
• react-native-firebase: Firebase সেবাগুলি (অথেন্টিকেশন, মেসেজিং, ডাটাবেস) ইন্টিগ্রেট করতে।
• react-native-push-notification: পুশ নোটিফিকেশন যোগ করতে।
• react-native-sound: সাউন্ড এবং অডিও ফিচার ইন্টিগ্রেট করতে।
• react-native-device-info: ডিভাইস ইনফরমেশন সংগ্রহ করতে।

সারাংশ

React Native তে third-party native libraries ইন্টিগ্রেট করলে আপনি আপনার অ্যাপের কার্যকারিতা বাড়াতে পারেন। লাইব্রেরি ইনস্টল এবং কনফিগার করার পর, আপনি সেই ফিচারটি সহজেই JavaScript কোডের মাধ্যমে ব্যবহার করতে পারেন। পারমিশন ম্যানেজমেন্ট এবং সঠিক কনফিগারেশন করা গুরুত্বপূর্ণ, এবং বিভিন্ন ডিভাইস এবং প্ল্যাটফর্মে অ্যাপটি সঠিকভাবে কাজ করছে কিনা তা পরীক্ষা করতে হবে।